/**
 * 最终摇一摇页面
 */
import React from "react";
import {ModalWin, ModalLose} from "./prize-result";
import Loading from '../components/loading';
import ShakeHandler from 'shake.js';
import Tool from '../components/tool';

const mp3URL = '/vendor/shake.mp3';
export default class Shake extends React.Component {
    constructor(...props) {
        super(...props);
        this.state = {
            boxHeight: document.documentElement.clientHeight,
            win: null,
            shaking: false,
            loading: false,
            lose: null,
            serviceWindow: false

        }
    }

    onWinClosing() {
        this.setState({win: null, lose: null, loading: false, shaking: false, serviceWindow: false});
    }

    shaking() {
        this.setState({win: null, lose: null, loading: false, shaking: true});
        this.timer && clearTimeout(this.timer);
        this.timer = setTimeout(()=>this.onShakeStopped(), 300);
        this.audio.pause();
        this.audio.play();
    }

    onShakeStopped() {
        this.setState({shaking: false, loading: true});
        //todo:抽奖
        setTimeout(()=> {
            $.ajax({
                url: '/api/prize/award',
                dataType: 'json',
                success: (data)=> {
                    this.setState({loading: false, win: data});
                },
                error: (e)=> {
                    let json = JSON.parse(e.responseText);
                    this.setState({loading: false, lose: json.errmsg});
                }
            })
        }, 500);
    }

    componentDidMount() {
        Tool.setPageTitle('参与活动');

        //todo:摇一摇
        this.shake = new ShakeHandler({
            threshold: 15,
            timeout: 500
        });
        this.shake.start();
        window.addEventListener('shake', ()=>this.shaking(), false);
        //mp3
        this.audio = new Audio();
        this.audio.autoplay = false;
        this.audio.loop = false;
        this.audio.preload = true;
        this.audio.src = mp3URL;
        window.shaking = this.shaking.bind(this);
    }

    componentWillUnmount() {
        this.timer && clearTimeout(this.timer);
        //todo:摇一摇解绑
        window.removeEventListener('shake', ()=>this.shaking(), false);
        this.shake.stop();
        this.audio = null;
    }

    onServiceClicked() {
        this.setState({win: null, lose: null, loading: false, shaking: false, serviceWindow: true});
    }

    onServiceClosing() {
        this.setState({win: null, lose: null, loading: false, shaking: false, serviceWindow: false});
        wx && wx.closeWindow();
    }

    render() {
        let active = 'content';
        if (this.state.shaking) {
            active += ' shaking';
        }
        if (this.state.loading) {
            active += ' loading';
        }
        return (
            <div className="pages site-shake" style={{height: this.state.boxHeight}}>
                <div className={active}>
                    <div className="shake-up">
                        <div className="phone"></div>
                    </div>
                    <div className="shake-down"></div>
                    <div className="shake-btn"></div>
                </div>
                {this.state.loading ? <Loading text="抽奖中"/> : null}
                {this.state.win ? <ModalWin onServiceClicked={()=>this.onServiceClicked()} win={this.state.win}
                                            onClosing={()=>this.onWinClosing()}/> : null}
                {this.state.lose ? <ModalLose text={this.state.lose} onClosing={()=>this.onWinClosing()}/> : null}
                {this.state.serviceWindow ?
                    <ModalLose onClosing={()=>this.onServiceClosing()} text="恭喜您获奖，您可直接在公众号首页点击“客服”咨询领取。" btnText="确认"
                               title="提示"/> : null}
            </div>
        )
    }
}